<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.year,
		.month{
			width: 80px;
			height: 30px;
			outline: none;
			line-height: 30px;
			padding-left: 10px;
			position: relative;
			border-radius: 10px;
			/*appearance:none;
			-moz-appearance:none;
			-webkit-appearance:none;*/
		}
		.year:before,
		.month:before{
			width: 5px;
			height: 5px;
			position: absolute;
			right: 10px;
			top: 10px;
			border-left: 1px solid #000;
			border-bottom: 1px solid #000;
		}
	</style>
	<body>
		<div id="item">
			<select name="" class="month">
				<option value="请选择">请选择</option>
			</select>
			<select name="" class="year">
				<option value="请选择">请选择</option>
			</select>
		</div>
	</body>
	<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
	<script>
		var moth = ['01','02','03','04','05','06','07','08','09','10','11','12'];   //月
			for (var i=0;i<moth.length;i++) {
				$('.month').append('<option value='+moth[i]+'>'+moth[i]+'月</option>')
			}
			$('.month').change(function(){
				var _val=parseInt($(this).val());
				var dey=new Date("2017",_val,0).getDate()+1
				var _dey="";
				for(var i=1;i<dey;i++){
					_dey+='<option value='+i+'>'+i+'日</option>'
				}
				$('.year').html(_dey)
			})
		
	</script>
</html>
